import React,{useState } from 'react';
import { Space, Table, Tag,Button,Switch,message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import type { TableRowSelection } from 'antd/es/table/interface';
import './articlelist.css'

import Buttomm from '../../components/Content/buttomm'
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string;
  tagss:string,
  sort:number,
}

const onChange = (checked: boolean) => {
  console.log(`switch to ${checked}`);
  message.success('状态切换成功');
};
const columns: ColumnsType<DataType> = [
  
  {
    title: 'ID',
    dataIndex: 'age',
    key: 'age',
    render: (text) => <span>{text}</span>,
  },
  {
    title: '',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '所属分类',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '发布时间',
    key: 'tags',
    dataIndex: 'tags',
   
  },
  {
    title: '更新时间',
    key: 'tagss',
    dataIndex: 'tagss',
   
  },
  {
    title: '排序',
    key: 'sort',
    dataIndex: 'sort',

  },
  {
    title: '状态',
    render: (falg: boolean, render: any) => 
    <Switch 
    checkedChildren="正常" 
    unCheckedChildren="禁用" 
    defaultChecked
    onChange={onChange} 
    className="custom-switch"
    
   
  />
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
       
        <Button style={{background:"#009688",color:"#fff",display:"block",textAlign:"center",}}>编辑</Button>
        <Button style={{background:"#FF5722",color:"#fff",display:"block",textAlign:"center",}}>删除</Button>
      </Space>
    ),
  },
];

const data: DataType[] = [ 
  {
    key: '1',
    name: '斗罗大陆',
    age: 1,
    address: 'New York No. 1 Lake Park',
    tags: '2018-12-13 10:10',
    tagss: '2023-12-13 10:10',
    sort:1000,
  },
  {
    key: '2',
    name: '梅西',
    age: 2,
    address: 'London No. 1 Lake Park',
    tags: '2012-12-13 12:10',
    tagss:"2023-12-13 12:10",
    sort:1000,
   
  },
  {
    key: '3',
    name: '杰克',
    age: 3,
    address: 'Sydney No. 1 Lake Park',
    tags: '2015-12-13 12:10',
    tagss:"2023-12-13 12:10",
    sort:1000,
  },
  {
    key: '4',
    name: '高哥',
    age: 4,
    address: 'New York No. 1 Lake Park',
    tags: '2015-12-13 12:10',
    tagss:"2023-12-13 12:10",
    sort:1000,
  },
  {
    key: '5',
    name: '中国经济网-房产咨询',
    age: 5,
    address: 'London No. 1 Lake Park',
    tags: '2015-12-13 12:10',
    tagss:"2023-12-13 12:10",
    sort:1000,
   
  },
  {
    key: '6',
    name: '中国经济网-智慧城市',
    age: 6,
    address: 'Sydney No. 1 Lake Park',
    tags: '2015-12-13 12:10',
    tagss:"2023-12-13 12:10",
    sort:1000,
  },
];

const recyclebin: React.FC = () => {
  
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
  
  };
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: ``,
      children:(<>
      <Table
      bordered={true}
      columns={columns}
      dataSource={data}
      rowSelection={rowSelection}
      style={{ padding: "15px" }}
    >
      
    </Table>
    <Buttomm/>
    
    </>

      ),
    },
  ]

  return <div>
    <div className="top">
    
    <Tabs defaultActiveKey="1" items={items}  />
    </div>
   

  </div>
};
 

export default recyclebin;